<template>
  <el-dialog title="管理缩略语" :visible.sync="dialogVisible" :before-close="handleClose" fullscreen>
    <div class="wrapper">
      <div>
        <div class="row">
          <div class="cell">缩略语</div>
          <div class="cell">英文全称</div>
          <div class="cell">中文释义</div>
          <div class="cell">操作</div>
        </div>
        <el-form :model="ruleForm" class="rows" @submit.native.prevent>
          <div class="row item" v-for="(item, index) of list" :key="item.dataId + '_' + index">
            <el-form-item><el-input size="mini" v-model="item.nameShort" /></el-form-item>
            <el-form-item><el-input size="mini" v-model="item.nameEn" /></el-form-item>
            <el-form-item><el-input type="textarea" size="mini" v-model="item.description" :rows="1" /></el-form-item>
            <el-form-item>
              <el-button size="mini" type="text" :disabled="index === 0" @click="moveup(list, index)">上移</el-button>
              <el-button size="mini" type="text" :disabled="index === list.length - 1" @click="movedown(list, index)"
                >下移</el-button
              >
              <el-button size="mini" type="text" @click="add(index)">新增</el-button>
              <el-button size="mini" type="text" @click="remove(list, index)">删除</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div class="btn-row" v-if="list.length === 0">
          <el-button icon="el-icon-plus" size="mini" @click="add"></el-button>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { v4 as uuid } from 'uuid'
import { moveup, movedown, remove } from '@/utils/helpers'
import { cloneDeep } from 'lodash'

export default {
  name: 'ManageAbbrDialog',
  data() {
    return {
      list: [],
      ruleForm: {},
      dialogVisible: false
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.list = cloneDeep(this.$store.state.xmleditor.abbrTableData?.abbrData || [])
    },
    async handleConfirm() {
      this.$store.commit('xmleditor/SET_ABBR_BLOCK_LIST', this.list)
      this.$store.commit('xmleditor/UPDATE_ABBRS')
      this.handleClose()
    },
    add(index) {
      const newAbbr = {
        dataId: uuid(),
        nameShort: '',
        nameEn: '',
        description: ''
      }
      if (index !== undefined) {
        this.list.splice(index + 1, 0, newAbbr)
      } else {
        this.list.push(newAbbr)
      }
    },
    moveup,
    movedown,
    remove,
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
::v-deep .el-form-item__content {
  line-height: 30px;
}
::v-deep .el-textarea__inner {
  min-height: 28px;
  height: 28px;
  padding: 4px 15px;
}
/* ::v-deep .el-tag {
  margin: 0 2px;
} */
.row {
  display: flex;
}
.row > div {
  padding: 0 1px;
  margin-bottom: 0;
}
.row > div:nth-child(3) {
  flex-grow: 1;
}
.row > div:nth-child(1),
.row > div:nth-child(2),
.row > div:nth-child(4),
.row > div:last-child {
  width: 200px;
}
.btn-row {
  text-align: center;
  margin-top: 15px;
}
.btn-row .el-button--mini {
  padding: 7px 50px;
}
</style>
